﻿<div class="portlet light">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject"> {{l("DateAndTimePickers")}}</span>
        </div>
    </div>
    <div class="portlet-body">
        <form role="form">
            <div class="form-group form-md-line-input form-md-floating-label row">
                <label class="col-md-2 control-label">Default date picker</label>
                <div class="col-md-10">
                    <div class="input-group">
                        <div class="input-group-control">
                            <input type="datetime" #SampleDatePicker name="SampleDatePicker" class="form-control">
                            <label>{{l("SelectDate")}}</label>
                        </div>
                        <span class="input-group-btn btn-right">
                            <button class="btn green-haze" type="button" (click)="submitDate()">{{l("Submit")}}</button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group form-md-line-input form-md-floating-label row">
                <label class="col-md-2 control-label">Default datetime picker</label>
                <div class="col-md-10">
                    <div class="input-group">
                        <div class="input-group-control">
                            <input type="datetime" #SampleDateTimePicker name="SampleDateTimePicker" class="form-control">
                            <label>{{l("SelectDate")}}</label>
                        </div>
                        <span class="input-group-btn btn-right">
                            <button class="btn green-haze" (click)="submitDateTime()" type="button">{{l("Submit")}}</button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group form-md-line-input form-md-floating-label edited row">
                <label class="col-md-2 control-label">Default daterange picker</label>
                <div class="col-md-10">
                    <div class="input-group">
                        <div class="input-group-control">

                            <date-range-picker name="SampleDateRangePicker"
                                               [(startDate)]="dateRangePickerStartDate"
                                               [(endDate)]="dateRangePickerEndDate"
                                               [allowFutureDate]="true">
                            </date-range-picker>

                        </div>
                        <span class="input-group-btn btn-right">
                            <button class="btn green-haze" (click)="submitDateRange()" type="button">{{l("Submit")}}</button>
                        </span>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
